<!DOCTYPE html>
<html lang="en" class="no-js"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>文章blog前人之荐</title>
		<meta name="description" content="Inspiration for Article Intro Effects">
		<meta name="keywords" content="title, header, effect, scroll, inspiration, medium, web ">
		<meta name="author" content="Codrops">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		
		<link rel="stylesheet" type="text/css" href="css/icons.css" />
		<link rel="stylesheet" type="text/css" href="css/style1.css" />
		<script src="js/modernizr.custom.js"></script>
		<link rel="stylesheet" type="text/css" href="./Article 1_files/normalize.css">
		<link rel="stylesheet" type="text/css" href="./Article 1_files/demo.css">
		<link rel="stylesheet" type="text/css" href="./Article 1_files/component.css">
		<!--[if IE]>
  		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<script type="text/javascript" async="" src="./Article 1_files/ga.js"></script>
		
		<link rel="stylesheet" type="text/css" href="./Article 1_files/demoad.css">
		<script src="./Article 1_files/ad.js" async=""></script></head>
		<style type="text/css">
			.pinglun-zong{
				height:;
				width: 90%;
				/*background: red;*/
				margin:20px auto;
			}
			.pinglun-touxiang{
				background:#fff;	
				height:45px;
				width:45px;
				-webkit-border-radius:45px;
                -moz-border-radius:45px;
                border-radius:45px; 
               	float: left;
			}
			.pinglun-neirong{
				width:85%;
				color: #fff;
				background: url(touming.png);
				margin-left: 50px;
				border-radius: 10px;
				font-size: 0.8em;
				min-height: 50px;
			}
			.pinglun-neirong-wenzi{
				margin:3px 5px;
			}
			.pinglun-bianji{
				height: 64px;
				width: 90%;
				/*background: red;*/
				margin:20px 8%;
			}
			#loginbtn{
				color:White;
				background:#1F47AD;
				text-decoration:none;
				padding:10px 95px;
				margin-left:60%;
				margin-top:20px;
				border-radius:5px;
				opacity:0.8;
				filter:alpha(opacity=80);
				border-color:#1F47AD;
			}
			div{ word-wrap: break-word; word-break: normal;}
		</style>
		<!-- 评论 -->
			<style type="text/css"> 
				.rightbox1{  width: 28%; background-color:#4095D6; border:1px solid #4095D6;border-radius: 10px}
				.rightbox2{   width: 80px; background-color:#4095D6; border:1px solid #4095D6;animation: myfirst2 0.5s; -moz-animation: myfirst2 0.5s; -webkit-animation: myfirst2 0.5s;border-radius: 10px}
				.rightbox2:hover{ width: 28%; background-color:#4095D6; border:1px solid #4095D6; box-shadow:1px 1px 5px 1px rgba(0, 0, 0, 0.2); animation: myfirst 0.5s; -moz-animation: myfirst 0.5s; -webkit-animation: myfirst 0.5s;}
				/*.rightbox2 ul{ display:none;}*/
				.rightbox2 .pinglun-zong{display: none;}
				.rightbox2 .pinglun-bianji{display: none;}
				.rightbox2 #loginbtn{display: none;}
				/*.rightbox2:hover ul{display:block;}*/
				.rightbox2:hover .pinglun-zong{display:block;}
				.rightbox2:hover .pinglun-bianji{display:block;}
				.rightbox2:hover #loginbtn{display:block;}

				.rightbox3{   width: 80px; background-color:#4095D6; border:1px solid #4095D6;border-radius: 10px}
				/*.rightbox3 ul{ display:none;}*/
				.rightbox3 .pinglun-zong{display: none;}
				.rightbox3 .pinglun-bianji{display: none;}
				.rightbox3 #loginbtn{display: none;}
				/*.rightbox3:hover ul{display:block;}*/

				@keyframes myfirst
				{
				0%   {width:80px;}
				100% {width:28%;}
				}

				@-moz-keyframes myfirst /* Firefox */
				{
				0%   {width:80px;}
				100% {width:28%;}
				}

				@-webkit-keyframes myfirst /* Safari 和 Chrome */
				{
				0%   {width:80px;}
				100% {width:28%;}
				}

				@keyframes myfirst2
				{
				0%   {width:24%;}
				100% {width:80px;}
				}

				@-moz-keyframes myfirst2 /* Firefox */
				{
				0%   {width:24%;}
				100% {width:80px;}
				}

				@-webkit-keyframes myfirst2 /* Safari 和 Chrome */
				{
				0%   {width:24%;}
				100% {width:80px;}
				}


				.clearfloat{ clear:both;}
				#rightbox{margin-left:80px; position:fixed; right:0; top:30px; height:100%;}
				#rightboxa{left:0px; text-align:left; margin: 4px;}
				#righta{margin-right: 4px;}

				</style>
		<!-- 评论end -->

		<!-- 头像 -->
				<script type="text/javascript" >
				function ResizeImages()
				{
				   var myimg,oldwidth,oldheight;
				   var maxwidth=550;
				   var maxheight=880
				   var imgs = document.getElementsByTagName('img');  

				   for(i=0;i<imgs.length;i++){
				     myimg = imgs[i];

				     if(myimg.width > myimg.height)
				     {
				         if(myimg.width > maxwidth)
				         {
				            oldwidth = myimg.width;
				            myimg.height = myimg.height * (maxwidth/oldwidth);
				            myimg.width = maxwidth;
				         }
				     }else{
				         if(myimg.height > maxheight)
				         {
				            oldheight = myimg.height;
				            myimg.width = myimg.width * (maxheight/oldheight);
				            myimg.height = maxheight;
				         }
				     }
				   }
				}
				ResizeImages();
				</script>
		<!-- 头像end -->
	<body class="demo-1">
		<div id="container" class="container intro-effect-push">
			<!-- Top Navigation -->
			<div class="codrops-top clearfix" >
				<a  href="#" style="color:#555;"><span>shang yizhang</span></a>
				<span class="right"><a  href="#" style="color:#555;a:hover;"><span>xiayizhang</span></a></span>
			</div>
			<header class="header">
				<div class="bg-img"><img src="./Article 1_files/3.jpg" alt="Background Image"></div>
				<div class="title">
					<h1>这里是文章标题</h1>
					<br>
					<br>
					<p>by <strong>作者</strong> — Posted in <strong>地点</strong> on <strong>时间</strong></p>
				</div>
			</header>
			
			<div class="title">
				
				<h1>这里是标题</h1>
				<p class="subline">概要</p>
				<p>by <strong>作者</strong> — Posted in <strong>地点</strong> on <strong>时间</strong></p>
			</div>
			<article class="content" id="mainContent">
				<div>
					<p>这里是文章概要这里是文章概要这里是文章概要这里是文章概要这里是文章概要这里是文章概要这里是文章概要这里是文章概要这里是文章概要这里是文章概要这里是文章概要这里是文章概要这里是文章概要这里是文章概要这里是文章概要这里是文章概要这里是文章概要这里是文章概要</p>
					<p>文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容.</p>
					<p>文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容</p>
					<p>文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容</p>
					<p>文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容文章主要内容</p>
					
					
				</div>
			</article>
			
		</div><!-- /container -->
		<div id="rightbox" class="rightbox2"  >
        <div id="rightboxa"><img id="righta" src="frame/left.png" onclick="closeboxright(2);"></div>
            <div class="pinglun-zong">
            	<div class="pinglun-touxiang"><img height="45" alt="" width="45" src="touxiang.jpg" style="-webkit-border-radius:45px; -moz-border-radius:45px;border-radius:45px;"/></div>
            	<div class="pinglun-neirong"><p class="pinglun-neirong-wenzi">文章还可以，写得蛮好的</p></div>
            </div>
            <div class="pinglun-zong">
            	<div class="pinglun-touxiang"><img height="45" alt="" width="45" src="touxiang.jpg" style="-webkit-border-radius:45px; -moz-border-radius:45px;border-radius:45px;"/></div>
            	<div class="pinglun-neirong"><p class="pinglun-neirong-wenzi">文章还可以，写得蛮好的文章还可以，写得蛮好的</p></div>
            </div>
            <div class="pinglun-zong">
            	<div class="pinglun-touxiang"><img height="45" alt="" width="45" src="touxiang.jpg" style="-webkit-border-radius:45px; -moz-border-radius:45px;border-radius:45px;"/></div>
            	<div class="pinglun-neirong"><p class="pinglun-neirong-wenzi">123123121231231231232123132123</p></div>
            </div>
            <div class="pinglun-zong">
            	<div class="pinglun-touxiang"><img height="45" alt="" width="45" src="touxiang.jpg" style="-webkit-border-radius:45px; -moz-border-radius:45px;border-radius:45px;"/></div>
            	<div class="pinglun-neirong"><p class="pinglun-neirong-wenzi">123123121231231231232123132123</p></div>
            </div>
            <div class="pinglun-zong">
            	<div class="pinglun-touxiang"><img height="45" alt="" width="45" src="touxiang.jpg" style="-webkit-border-radius:45px; -moz-border-radius:45px;border-radius:45px;"/></div>
            	<div class="pinglun-neirong"><p class="pinglun-neirong-wenzi">123123121231231231232123132123</p></div>
            </div>
            <br>
            <div class="pinglun-bianji">
            	<textarea  style="margin:5px 5px;height:100%;width:95%;background:url(touming.png);border-radius: 5px;font-size:14px;color:#1F47AD;border-color:#4095D6;"></textarea>
           	</div>
           	<div><input value="submit" id="loginbtn" style="color:#fff;padding: 10px 10% 11px;font-size:14px" type="button"></div>
            <br>
    	</div>
		<script src="./Article 1_files/classie.js"></script>
		<script>
			(function() {

				// detect if IE : from http://stackoverflow.com/a/16657946		
				var ie = (function(){
					var undef,rv = -1; // Return value assumes failure.
					var ua = window.navigator.userAgent;
					var msie = ua.indexOf('MSIE ');
					var trident = ua.indexOf('Trident/');

					if (msie > 0) {
						// IE 10 or older => return version number
						rv = parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
					} else if (trident > 0) {
						// IE 11 (or newer) => return version number
						var rvNum = ua.indexOf('rv:');
						rv = parseInt(ua.substring(rvNum + 3, ua.indexOf('.', rvNum)), 10);
					}

					return ((rv > -1) ? rv : undef);
				}());


				// disable/enable scroll (mousewheel and keys) from http://stackoverflow.com/a/4770179					
				// left: 37, up: 38, right: 39, down: 40,
				// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
				var keys = [32, 37, 38, 39, 40], wheelIter = 0;

				function preventDefault(e) {
					e = e || window.event;
					if (e.preventDefault)
					e.preventDefault();
					e.returnValue = false;  
				}

				function keydown(e) {
					for (var i = keys.length; i--;) {
						if (e.keyCode === keys[i]) {
							preventDefault(e);
							return;
						}
					}
				}

				function touchmove(e) {
					preventDefault(e);
				}

				function wheel(e) {
					// for IE 
					//if( ie ) {
						//preventDefault(e);
					//}
				}

				function disable_scroll() {
					window.onmousewheel = document.onmousewheel = wheel;
					document.onkeydown = keydown;
					document.body.ontouchmove = touchmove;
				}

				function enable_scroll() {
					window.onmousewheel = document.onmousewheel = document.onkeydown = document.body.ontouchmove = null;  
				}

				var docElem = window.document.documentElement,
					scrollVal,
					isRevealed, 
					noscroll, 
					isAnimating,
					container = document.getElementById( 'container' ),
					trigger = container.querySelector( 'button.trigger' );

				function scrollY() {
					return window.pageYOffset || docElem.scrollTop;
				}
				
				function scrollPage() {
					scrollVal = scrollY();
					
					if( noscroll && !ie ) {
						if( scrollVal < 0 ) return false;
						// keep it that way
						window.scrollTo( 0, 0 );
					}

					if( classie.has( container, 'notrans' ) ) {
						classie.remove( container, 'notrans' );
						return false;
					}

					if( isAnimating ) {
						return false;
					}
					
					if( scrollVal <= 0 && isRevealed ) {
						toggle(0);
					}
					else if( scrollVal > 0 && !isRevealed ){
						toggle(1);
					}
				}

				function toggle( reveal ) {
					isAnimating = true;
					
					if( reveal ) {
						classie.add( container, 'modify' );
					}
					else {
						noscroll = true;
						disable_scroll();
						classie.remove( container, 'modify' );
					}

					// simulating the end of the transition:
					setTimeout( function() {
						isRevealed = !isRevealed;
						isAnimating = false;
						if( reveal ) {
							noscroll = false;
							enable_scroll();
						}
					}, 1200 );
				}

				// refreshing the page...
				var pageScroll = scrollY();
				noscroll = pageScroll === 0;
				
				disable_scroll();
				
				if( pageScroll ) {
					isRevealed = true;
					classie.add( container, 'notrans' );
					classie.add( container, 'modify' );
				}
				
				window.addEventListener( 'scroll', scrollPage );
			
			})();
		</script>
		<!-- For the demo ad only -->   
		<script src="./Article 1_files/demoad.js"></script>

			<nav id="bt-menu" class="bt-menu">
				<a href="#" class="bt-menu-trigger">Menu</a>
				<ul>
					
					<li><a href="#" >赞（12）</a></li>
					<li><a href="#" >收藏</a></li>
					<li><a href="#" >分享</a></li>
					<li><a href="#" >转发</a></li>
					<li><a href="#" >热度</a></li>
				</ul>
			</nav>
		<script src="js/classie.js"></script>
		<script src="js/borderMenu.js"></script>

		
</body>
<!-- 评论 -->
		<script src="frame/jquery-1.js" type="text/javascript"></script>
		<script>
		function closeboxright(v){
		    if(v == 1){
		        $("#rightbox").removeClass("rightbox1");
		        $('#rightbox').addClass('rightbox2');
		        $("#rightboxa").html("<img id='righta' src='frame/left.png' onclick='closeboxright(2);'/>");
		        $("#mainContent").css("margin-right","0px")
		    }else{
		        $("#rightbox").removeClass("rightbox2");
		        $("#rightbox").addClass("rightbox1");
		        $("#rightboxa").html("<img id='righta' src='frame/right.png' onclick='closeboxright(1);'/>");
		        $("#mainContent").css("margin-right","28%")
		    }
		}
		
		</script>
		<!-- 评论end -->
</html>